<template>
    <div class="amap-container">
        <div id="map" style="height: 500px"></div>
        <!-- <div class="search-box">
            <input
                type="text"
                v-model="address"
                placeholder="请输入地址"
                @keydown.enter="searchAddress"
            />
            <button @click="searchAddress">搜索</button>
        </div>
        <div v-if="result">
            <p>地址：{{ result.formattedAddress }}</p>
            <p>纬度：{{ result.latitude }}</p>
            <p>经度：{{ result.longitude }}</p>
        </div> -->
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
window._AMapSecurityConfig = {
    securityJsCode: "abafa9c11b734860db2fd7e532d31e17",
};

const address = ref("");
let map = null;
let geocoder = null;
let marker = null;
let result = ref(null);

onMounted(() => {
    var lnglat = [114.05378, 22.503554];
    // https://restapi.amap.com/v3/geocode/geo?key=f301f7d304f13f5b484af863325e907f&address=%E6%B7%B1%E5%9C%B3%E5%B8%82%E7%A6%8F%E7%94%B0%E5%8C%BA%E7%A6%8F%E4%BF%9D%E8%A1%97%E9%81%93%E7%A6%8F%E4%BF%9D%E7%A4%BE%E5%8C%BA%E6%B7%B1%E6%B8%AF%E5%9B%BD%E9%99%85%E7%A7%91%E6%8A%80%E5%9B%ADE%E6%A0%8B13%E5%B1%82
    map = new AMap.Map("map", {
        zoom: 13, // 初始缩放级别
        center: lnglat, // 初始中心点（深圳市福田区福保街道福保社区深港国际科技园E栋13层）
    });

    // document.getElementById("lnglat").value = lnglat;
    marker.setPosition(lnglat);
    map.add(marker);
    map.setFitView(marker);

    // geoCode();
});

geocoder = new AMap.Geocoder({
    city: "深圳", //城市设为北京，默认：“全国”
});

marker = new AMap.Marker();

function geoCode() {
    // var address = document.getElementById("address").value;
    geocoder.getLocation(address, function (status, result) {
        if (status === "complete" && result.geocodes.length) {
            var lnglat = result.geocodes[0].location;
            // document.getElementById("lnglat").value = lnglat;
            marker.setPosition(lnglat);
            map.add(marker);
            map.setFitView(marker);
        } else {
            console.log("根据地址查询位置失败");
        }
    });
}
// document.getElementById("geo").onclick = geoCode;
// document.getElementById("address").onkeydown = function (e) {
//     if (e.keyCode === 13) {
//         geoCode();
//         return false;
//     }
//     return true;
// };

// const searchAddress = async () => {
//     if (!address.value) return;

//     // 使用示例
//     try {
//         const results = await getLocationAsync("深圳市龙岗区龙翔大道2001号");
//         const primaryLocation = results[0].location;
//     } catch (error) {
//         console.error("地理编码失败:", error);
//     }
// };
// const getLocationAsync = (address) => {
//     return new Promise((resolve, reject) => {
//         // geocoder.getLocation(address, (status, result) => {
//         //     if (status === "complete") {
//         //         if (result.geocodes.length > 0) {
//         //             resolve(result.geocodes);
//         //         } else {
//         //             reject(new Error("No geocode results"));
//         //         }
//         //     } else {
//         //         reject(new Error(`Geocode failed: ${status}`));
//         //     }
//         // });
//         var geocoder;
//         //加载地理编码插件
//         AMap.plugin(["AMap.Geocoder"], function () {
//             //加载地理编码插件
//             geocoder = new AMap.Geocoder({
//                 radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
//                 extensions: "all", //返回地址描述以及附近兴趣点和道路信息，默认“base”
//             });
//             //返回地理编码结果
//             geocoder.on("error", (status, result) => {
//                 debugger;
//             });
//             geocoder.getLocation(address, (status, result) => {
//                 debugger;
//             });
//             //逆地理编码
//             geocoder.getAddress(new AMap.LngLat(116.359119, 39.972121));
//         });
//     });
// };

onUnmounted(() => {
    // 销毁地图实例
    if (map) {
        map.destroy();
    }
});
</script>

<style scoped>
.amap-container {
    max-width: 1000px;
    margin: 0 auto;
}

.search-box {
    margin: 20px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-box input {
    padding: 8px;
    width: 300px;
    margin-right: 10px;
}

.search-box button {
    padding: 8px 20px;
    background: #1a73e8;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
</style>
